//导入nodejs 的内置模块  path
const path = require('path')
// 引入html打包的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//导入提取js中的css代码的两个插件
//引入 提取js中的css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 自当清除dist
const {CleanWebpackPlugin }=require('clean-webpack-plugin');

module.exports = {
    //入口
    entry: {
        // swiper
        swiper:'./src/lib/swiper/swiper-bundle.js',
        // 公共css样式
        commomCss:'./src/js/commomCss.js',
        // 公共js样式
        dom:'./src/js/commom/dom.js',
        http:'./src/js/commom/http.js',
        utils:'./src/js/commom/utils.js',
        // 引入插件
        weui:'./src/lib/weui/weui.js',
        captcha:'./src/lib/captcha-mini.js',
        home:'./src/js/home.js',
        login:'./src/js/login.js',
        register:'./src/js/register.js',
        logo:'./src/js/logo.js',
        running:'./src/js/running.js',
        my:'./src/js/my.js',
        edit:'./src/js/edit.js',
        train:'./src/js/train.js',
        details:'./src/js/details.js',
        myData:'./src/js/myData.js',
    },

    //出口
    // dist/bundle.js
    output: {
        //获取项目的根目录的绝对路径 再拼接上dist
        path: path.resolve(__dirname, 'dist'),
        //打包完之后 输出的js文件
        filename: 'js/[name].js',
        // 打包完成之后的html文件引入其他资源的基础路径（相对路径）
        publicPath: './'
    },

    //解释器 loader
    module: {

        rules: [
            // css-loader 将css文件能够给weback打包
            // style-loader 将已经打包好的css代码写入到style标签中
            {
                test: /\.css$/,        
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                },'css-loader','postcss-loader']
            },
            // 打包less到style标签中
            {
                test: /\.less$/, //配置less处理器
              use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader','less-loader']
            },
            {
                test: /\.(jpg|png|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    // 重命名图片名字为长度16的随机字符 ext：原来的图片后缀
                    name: '[hash:16].[ext]',
                    // 限制小于多少的才进行打包 20k以内的打包
                    limit: 20 * 1024,
                    // 默认css中的图片以ES6的模块进行打包，但是html中
                    // 图片只能以node下的commonjs规范进行打包
                    //有可能存在图片打包的冲突，要求直接将css打包模块设置为node的模块打包
                    esModule: false,
                    outputPath:'img'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, //配置iconfont文件打包
                loader: 'file-loader',
                // 创建icon font文件夹
                options:{
                    outputPath:'fonts'
                },
            },
            {
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除
            }

        ]

    },

    //插件
    plugins: [
        // new 插件名({
        // 配置  key:value
        // })
        new HtmlWebpackPlugin({
            // 需要打包的html路径
            template: './src/pages/home.html'
        }),
        //提取js中的css代码
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/pages/home.html',
            filename:"home.html",
            chunks:['home','commomCss','dom','http','swiper','utils'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/login.html',
            filename:"login.html",
            chunks:['login','commomCss','dom','http'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/register.html',
            filename:"register.html",
            chunks:['register','commomCss','dom','http','captcha','utils'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/logo.html',
            filename:"logo.html",
            chunks:['logo','commomCss','dom'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/running.html',
            filename:"running.html",
            chunks:['running','commomCss','dom','http','captcha','utils'],
        }),        
        new HtmlWebpackPlugin({
            template:'./src/pages/my.html',
            filename:"my.html",
            chunks:['my','commomCss','dom','http','captcha','utils'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/edit.html',
            filename:"edit.html",
            chunks:['edit','commomCss','dom','weui','http'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/train.html',
            filename:"train.html",
            chunks:['train','commomCss','dom','weui','http','utils'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/details.html',
            filename:"details.html",
            chunks:['details','commomCss','dom','weui','http','utils'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/pages/myData.html',
            filename:"myData.html",
            chunks:['myData','commomCss','dom','weui','http','utils'],
        }),
        // 自动清除dist
        new CleanWebpackPlugin(),
    ],
    //热更新 本地服务启动
    //webpack.config.js   
    // 开发服务器 配置【】
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8030, // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'logo.html', // 打开的页面
    },
    target: 'web', // 目标是浏览器

    //环境 
    //本地环境 开发环境 development
    //线上环境 生产环境 production
    mode: 'development',
}